import {URL} from '../../libs/Url';
import {Fetch} from '../../libs/';
export default React.createClass({
    getInitialState(){
        return {
            name: '',
            comment: '',

        }
    },
    componentWillReceiveProps(nextProps){
        this.setState({
            id: nextProps.id,
            name: nextProps.name,
            comment: nextProps.comment,
        })
    },
    render(){
        const self = this;
        var form = {name: this.state.name || this.props.name, comment: this.state.comment || this.props.comment};
        return <div>
            <form className="form-horizontal" onSubmit={(event)=> {
                event.preventDefault();
                if (!event.target.name.value) {
                    return alert('请填写相册名称!')
                }
                Fetch(self.props.id ? URL.ALBUM_UPDATE : URL.ALBUM_CREATE, {
                    body: Object.assign({}, {
                        name: event.target.name.value,
                        comment: event.target.comment.value,
                    }, self.props.id ? {id: self.props.id} : {})
                })
                    .then(res=> {
                        if (typeof self.props.onsuccess == 'function') {
                            self.props.onsuccess(res.album)
                        }
                    })
                    .catch(e=> {
                        console.log(e)
                    })
            }}>
                <div className="form-group">
                    <label className="col-sm-3 control-label">
                        <span className="text-orange"> * </span>名称：
                    </label>
                    <div className="col-sm-8">
                        <input ref="name"
                               name="name"
                               placeholder="填写相册名称"
                               className="form-control"
                               onChange={(e)=> {
                                   self.setState({
                                       [e.target.name]: e.target.value
                                   })
                               }}
                               defaultValue={form.name}
                               type="text"/>
                    </div>
                </div>
                <div className="form-group">
                    <label className="col-sm-3 control-label">描述：</label>
                    <div className="col-sm-8">
                        <textarea
                            ref="comment"
                            name="comment"
                            placeholder="填写相册简介"
                            onChange={(e)=> {
                                self.setState({
                                    [e.target.name]: e.target.value
                                })
                            }}
                            defaultValue={form.comment}
                            className="form-control">

                        </textarea>
                    </div>
                </div>
                <br/>
                <br/>
                <div className="modal-footer" style={{margin: '-18px'}}>
                    <button type="button"
                            onClick={()=> {
                                (typeof self.props.onclose == 'function') && self.props.onclose()
                            }}
                            className="btn btn-default">关闭
                    </button>
                    <input type="submit"
                           value="确定"
                           className="btn btn-primary"/>
                </div>
            </form>

        </div>

    }
})